<template>
	<div class="index rowBC">
		<div class="item columnCC" v-for="(item, index) in list" :key="index">
			<img :src="item.icon" />
			<a class="mt-1 mb-3">{{ item.name }}</a>
			 <el-switch
			    v-model="item.value"
				class="switch"
				size="large"
			    inline-prompt
			    active-text="ON"
			    inactive-text="OFF"
			  />
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		computed,
		reactive
	} from "vue";

	const list = reactive < any > ([{
		name: '照明',
		icon: new URL('@/assets/img/index/zm.png',
            import.meta.url).href,
		value: false
	}, {
		name: '排风',
		icon: new URL('@/assets/img/index/pf.png',
            import.meta.url).href,
		value: true
	}, {
		name: '灭蚊蝇',
		icon: new URL('@/assets/img/index/mwy.png',
            import.meta.url).href,
		value: true
	}, {
		name: '智能除臭',
		icon: new URL('@/assets/img/index/zncc.png',
            import.meta.url).href,
		value: false
	}, {
		name: '污水处理',
		icon: new URL('@/assets/img/index/wscl.png',
            import.meta.url).href,
		value: true
	}])
</script>

<style lang="scss" scoped>
	.index {
		flex-flow: row wrap;
		color: #fff;
		// justify-content: space-between;
		height: 100%;
		.item {
			background-size: 100% 100%;
			font-size: 0.8em;
			img {
				width: 4.5em;
				height: 4.5em;
				border-radius: 50%;
			}
			:deep(.el-switch) {
				--el-switch-on-color: #34a471;
				--el-switch-off-color: #ec5f74;
			}
			.switch {
				transform: scale(1.4);
			}
		}
	}
</style>
